<template>
    <div class="w-dvw h-dvh flex justify-center items-center">
        <div class="w-[500px] h-[300px]">
            <RouterLink to="/" class="leading-[50px]">
                回到首页
            </RouterLink>
            <hr class="text-[#bbb]" />
            <p class="font-black leading-[50px]">
                成绩查询
            </p>

            <select v-model="currentSelectCourseId">
                <option 
                    v-for="item in courseList"
                    :key="item.id"
                    :value="item.id"
                >
                    {{ item.id }} - {{ item.name }}
                </option>
            </select>

            <select v-model="currentSelectStudentId" class="ml-[20px]">
                <option 
                    v-for="item in studentList"
                    :key="item.id"
                    :value="item.id"
                >
                    {{ item.name }}
                </option>
            </select>

            <RouterLink 
                :to="{
                    name: 'resultView',
                    params:
                    {
                        studentId: currentSelectStudentId,
                        courseId: currentSelectCourseId
                    }
                }" 
                class="ml-[20px]"
            >
                开始查询
            </RouterLink>
        </div>

    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { getApi } from '@/utils/request';

const studentList = ref([])

const courseList = ref([])

const currentSelectStudentId = ref(-1)

const currentSelectCourseId = ref(-1)

onMounted
(
    () =>
    {
        setStudentData()

        setCourseData()
    }
) 

const setCourseData = async () =>
{
    const res = await getApi('/courses.php')
    if (res.stat !== 1)
    {
        return
    }
    courseList.value = res.data
    currentSelectCourseId.value = res.data[0].id
}

const setStudentData = async () =>
{
    const res = await getApi('/students.php')
    if (res.stat !== 1)
    {
        alert(res.msg)
        return
    }
    studentList.value = res.data
    currentSelectStudentId.value = res.data[0].id
}
</script>
<style scoped>
</style>